import { config, globalConfig, getColor } from './config';
import { setCityDarkMap, clearCityDarkMap } from './createDarkModalOrg';
const markArr = [];
// import { createZhPolygon } from './createZhPolygon';
const style = {
  fillOpacity: 0.1,
  strokeColor: 'rgb(255,255,255)',
  fillColor: 'rgb(17,47,98)',
  strokeWeight: 1,
  strokeOpacity: 0.3
  // cursor: globalConfig.clickable ? 'pointer' : 'hand'
};
const ImageLayer = null;

function createImage(AMap) {
  const obj = {};
  obj['330213'] = new AMap.ImageLayer({
    url: 'img/fh.png',
    bounds: new AMap.Bounds(
      [121.0 + 0.034, 29.425292 - 0.040], // ['+（左侧）向右' '+（底部）向上']
      [121.860185 - 0.060, 29.802103 - 0.004] // ['-（右侧）向左' '-（顶部）向下']
    ),
    zooms: [1, 30],
    zIndex: 10
  });

  obj['330206'] = new AMap.ImageLayer({
    url: 'img/bl.png',
    bounds: new AMap.Bounds(
      [121.660777 - 0.03, 29.722435 - 0.04], // ['+（左侧）向右' '+（底部）向上']
      [122.136104 + 0.04, 29.996198 + 0.005] // ['-（右侧）向左' '-（顶部）向下']
    ),
    zooms: [1, 30],
    zIndex: 10
  });

  obj['330282'] = new AMap.ImageLayer({
    url: 'img/cx.png',
    bounds: new AMap.Bounds(
      [121.045759 - 0.03, 30.046741 - 0.03], // ['+（左侧）向右' '+（底部）向上']
      [121.637691 + 0.015, 30.505062] // ['-（右侧）向左' '-（顶部）向下']
    ),
    zooms: [1, 30],
    zIndex: 10
  });

  obj['330281'] = new AMap.ImageLayer({
    url: 'img/yy.png',
    bounds: new AMap.Bounds(
      [120.882731 - 0.035, 29.697032 - 0.05], // ['+（左侧）向右' '+（底部）向上']
      [121.390832 + 0.055, 30.376594 - 0.01] // ['-（右侧）向左' '-（顶部）向下']
    ),
    zooms: [1, 30],
    zIndex: 10
  });

  obj['330203'] = new AMap.ImageLayer({
    url: 'img/hs.png',
    bounds: new AMap.Bounds(
      [121.147689 - 0.03, 29.743435 - 0.042], // ['+（左侧）向右' '+（底部）向上']
      [121.544153 + 0.038, 29.965618] // ['-（右侧）向左' '-（顶部）向下']
    ),
    zooms: [1, 30],
    zIndex: 10
  });

  obj['330205'] = new AMap.ImageLayer({
    url: 'img/jb.png',
    bounds: new AMap.Bounds(
      [121.367439 - 0.025, 29.877223 - 0.027], // ['+（左侧）向右' '+（底部）向上']
      [121.63795 + 0.025, 30.066975 + 0.005] // ['-（右侧）向左' '-（顶部）向下']
    ),
    zooms: [1, 30],
    zIndex: 10
  });

  obj['330211'] = new AMap.ImageLayer({
    url: 'img/zz.png',
    bounds: new AMap.Bounds(
      [121.473515 - 0.027, 29.892596 - 0.022], // ['+（左侧）向右' '+（底部）向上']
      [121.788054 + 0.017, 30.087406 - 0.002] // ['-（右侧）向左' '-（顶部）向下']
    ),
    zooms: [1, 30],
    zIndex: 10
  });

  obj['330212'] = new AMap.ImageLayer({
    url: 'img/yz.png',
    bounds: new AMap.Bounds(
      [121.446408 - 0.005, 29.596866 - 0.01], // ['+（左侧）向右' '+（底部）向上']
      [121.875362 + 0.036, 29.94717 - 0.025] // ['-（右侧）向左' '-（顶部）向下']
    ),
    zooms: [1, 30],
    zIndex: 10
  });

  config.map.add(obj['330213']);
  config.map.add(obj['330206']);
  config.map.add(obj['330282']);
  config.map.add(obj['330281']);
  config.map.add(obj['330203']);
  config.map.add(obj['330205']);
  config.map.add(obj['330211']);
  config.map.add(obj['330212']);

  return obj;
}

function hideAllImage(obj) {
  Object.keys(obj).forEach(e => {
    obj[e] && obj[e].hide();
  });
}

function showImage(obj, code) {
  obj[code] && obj[code].show();
}

let OBJ = null;

export function createPolygon(geoJSON, data) {
  const { colorSelected } = getColor(globalConfig);

  const { AMap } = config;

  setTimeout(() => {
    OBJ = createImage(AMap);
    OBJ && hideAllImage(OBJ);
  }, 600);

  // const newData = JSON.parse(JSON.stringify(data));

  data.forEach((e, N) => {
    // eslint-disable-next-line no-unused-vars
    const [title, date, address, area, type, name, lnglat] = e;

    const iconImage = new AMap.Icon({
      image: 'https://www.hugoooo.com/cdn/point-org.png',
      size: new AMap.Size(16, 25), // 图标大小
      imageSize: new AMap.Size(16, 25)
    });

    const mark = new AMap.Marker({
      clickable: true,
      cursor: 'pointer',
      anchor: 'bottom-center',
      position: lnglat.split(','),
      offset: new AMap.Pixel(0, 20),
      zIndex: 300,
      // draggable: true,
      icon: iconImage
    });

    // mark.on('dragend', function() { // 拖动坐标获取新坐标
    //   const { lng, lat } = mark.getPosition();
    //     console.log(`${lng},${lat}`);
    // });

    config.map.add(mark);

    mark.on('click', () => {
      // const { lng, lat } = mark.getPosition();
      // console.log([title, date, address, area, type, name, `${lng},${lat}`], `${lng},${lat}`);
      // newData[N] = [title, date, address, area, type, name, `${lng},${lat}`];
      // console.log(JSON.stringify(newData, null, 2));
      if (mark.getContent()) return;
      markArr.forEach(e => {
        if (e.getContent()) {
          e.setContent('');
          e.setIcon(iconImage);
        }
      });

      mark.setContent(`
        <div class="amap-org-card">
          <div class="amap-org-title" onclick="window.AMAPORGCLICK && window.AMAPORGCLICK('${e}')">
            <div>${title}</div>
          </div>
        </div>
      `);
      mark.setzIndex(999);
    });

    markArr.push(mark);
  });

  const Polygon = config.ALoca.createPolygon({
    // 显示区县名字
    label: {
      enable: true,
      clickable: false,
      offset: new AMap.Pixel(0, 14),
      style: {
        fontWeight: 500,
        opacity: 0.9,
        fontSize: '24px',
        'text-shadow': '0px 3px 4px #000000'
      },
      ...globalConfig.labelStyle
    },
    style: {
      ...style,
      zIndex: 30,
      cursor: (globalConfig.clickable || globalConfig.hover) ? 'pointer' : 'hand',
      ...globalConfig.polygonStyle
    },
    // 点击事件
    select: {
      enable: globalConfig.clickable,
      // 点击时不做颜色变化，为false时点击会变成设置好的样式（红色）
      hideStyle: false,
      fillColor: colorSelected,
      fillOpacity: 0
    },
    // hover事件

    hover: {
      enable: globalConfig.hover,
      fillColor: colorSelected,
      fillOpacity: 0,
      // 只要鼠标移出该区域就消失
      mouseoutClear: false
    }
  }, geoJSON, function(e, type) {
    setCityDarkMap(e.De.extData.data, data);

    // 点击区域
    if (type === 'click') window.PolygonClick && window.PolygonClick(e.De.extData.data.name);

    // 鼠标滑过区域
    if (type === 'mouseover') window.PolygonHover && window.PolygonHover(e.De.extData.data.name);

    // 显示区县图片
    OBJ && hideAllImage(OBJ);
    showImage(OBJ, e.De.extData.data.adcode);

    if (globalConfig.autoMoveEnable) config.map.setCenter(e.De.extData.data.centroid);
  });

  return Polygon;
}

// 设置样式
export function setStyle(Polygon, areaName, newStyle) {
  areaName.forEach(e => {
    const PolygonData = Polygon._overlays.find(el => {
      return e == el._opts.extData.data.name;
    });
    if (PolygonData) {
      PolygonData.setOptions({
        fillOpacity: 0.8,
        strokeColor: '#99d5ff',
        fillColor: 'rgb(133,188,255)',
        strokeWeight: 4,
        strokeOpacity: 1,
        cursor: 'pointer',
        ...newStyle
      });
    }
  });
}

// 重置样式
export function resetStyle(Polygon) {
  clearCityDarkMap();
  OBJ && hideAllImage(OBJ);
  ImageLayer && config.map.remove(ImageLayer);
  markArr.forEach(e => {
    if (e.getContent()) {
      e.setContent('');
      e.setIcon('https://www.hugoooo.com/cdn/point-org.png');
    }
  });
  Polygon.setOptions({
    ...style,
    cursor: globalConfig.clickable ? 'pointer' : 'hand',
    ...globalConfig.polygonStyle
  });
}
